<template>
    <main>
        <div class="mark-top"></div>
        <div class="page-title">
            <Icon :name="pageConf.titleIcon" size="32px" />
            {{ pageConf.title }}
        </div>
        <div class="container">
            <InfoCard>
                <template #header>
                    <div class="header-tpl">
                        <Icon name="gold-coin" />
                        <div style="margin: 0 8px;">{{ pageConf.price }}</div>
                        <Button style="margin-left: 8px;" type="primary" size="small" icon="description"
                            @click="onCopy(pageConf.price)">复制</Button>
                    </div>
                </template>
                <template #content>
                    <div class="content-tpl">
                        <div style="display: flex;justify-content: center;
                        align-items: center;margin-bottom: 8px;">订单编号: {{ pageConf.orderNo }}<Button
                                style="margin-left: 8px;" size="small" icon="description"
                                @click="onCopy(pageConf.orderNo)"></Button></div>
                        <div class="flex">
                            截止付款倒计时: <CountDown :time="pageConf.countdown"></CountDown>
                        </div>
                    </div>
                </template>
            </InfoCard>

            <InfoCard>
                <template #header>
                    <div class="flex justify-center align-center">
                        我是验证类型上方描述
                    </div>
                </template>
                <template #content>
                    <copy-line v-for="(item,index) in pageConf.verifyEditor" :key="index" :prefix="true" :title="item.title" :value="item.value" />

                    <div class="flex justify-center align-center">我是验证类型下方描述</div>
                </template>
            </InfoCard>

            <InfoCard>
                <template #header>
                    <div class="flex justify-center align-center">
                        上传图片
                    </div>
                </template>
                <template #content>
                    <div class="flex justify-center">
                        <Uploader v-model="fileList" multiple :after-read="onRead"></Uploader>
                    </div>
                </template>
                <template #footer>
                    <div class="flex justify-center align-center" style="padding: 8px;">
                        <Button>我是按钮提交内容</Button>
                    </div>
                </template>
            </InfoCard>


            <InfoCard>
                <template #header>
                    <div class="red flex justify-center align-center">
                        {{ pageConf.modal.title }}
                    </div>
                </template>
                <template #content>
                    <div class="red flex justify-center align-center">{{ pageConf.modal.content }}</div>
                    <van-form>
                        <cell-group :border="false">
                            <field :required="true" v-bind:key="index"
                                v-for="(item, index) in pageConf.typeEditor" :name="item.title"
                                :label="item.title" :placeholder="item.value"></field>
                        </cell-group>
                    </van-form>
                </template>
                <template #footer>
                    <div class="flex justify-center" style="padding: 8px;">
                        <Button color="rgb(244,88,9)">确定</Button>
                    </div>
                </template>
            </InfoCard>

        </div>

    </main>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Icon, Button, Uploader, showNotify, Field, CellGroup, Form as VanForm } from "vant";
import InfoCard from "@/components/InfoCard.vue"
import CountDown from "@/components/CountDown.vue"
import CopyLine from "@/components/CopyLine.vue";

const pageConf = ref({
    title: '此处为页面标题',
    titleIcon: 'alipay',
    price: 299.00,
    orderNo: 'P541684986416541684984',
    countdown: 30 * 60 * 60, // 传入过期倒计时,
    qrcode: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
    modal: {
        title: '我是弹窗标题',
        content: '我是弹窗内容',
        fields: [
            {
                filedName: 'name',
                label: '姓名',
                value: '张三',
                placeholder: '请输入姓名',
                required: true,
                rules: [{ required: true, message: '请填写姓名' }]
            },
            {
                filedName: 'phone',
                label: '手机号',
                value: '13800000000',
                placeholder: '请输入手机号',
            }
        ],
    },
    upImgStatus: "1",
    imgButton: "多个地方",
    imgTitle: "二电饭锅",
    imgDescribe: "大幅度",
    imgSort: 7,
    typeStatus: "1",
    typeButton: "很反感",
    typeDescribe: "二等分",
    typeEditor: [
        {
            type: "input",
            title: "11234",
            value: "對手犯規得分"
        },
        {
            type: "input",
            title: "11234",
            value: "對手犯規得分"
        },
        {
            type: "input",
            title: "11234",
            value: "對手犯規得分"
        },
        {
            type: "input",
            title: "11234",
            value: "對手犯規得分"
        }
    ],
    typeSort: 8,
    verifyStatus: 1,
    verifyUp: "法国很反感和",
    verifyDown: "几个好几天",
    verifyEditor: [
        {
            type: "input",
            title: "11234",
            value: "對手犯規得分"
        },
        {
            type: "input",
            title: "11234",
            value: "對手犯規得分"
        },
        {
            type: "input",
            title: "11234",
            value: "對手犯規得分"
        },
        {
            type: "input",
            title: "11234",
            value: "對手犯規得分"
        }
    ],
    verifySort: 9
})

const fileList = ref([])

function onCopy(content: string | number) {
    navigator.clipboard.writeText(String(content)).then(() => {
        // 复制成功
        showNotify({ type: 'success', message: '复制成功' })
    }).catch(() => {
        // 复制失败
        showNotify({ type: 'danger', message: '复制失败' })
    })
}

function onRead(files) {
    console.log(files)
}
</script>

<style scoped lang="less">
.mark-top {
    width: 100%;
    height: 120px;
    background-color: rgb(84, 188, 189);
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.page-title {
    text-align: center;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 30px;
}

.container {
    margin-top: 8px;
    padding: 8px;

    .header-tpl {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #f50;
        font-weight: bold;
        font-size: 30px;
    }

    .content-tpl {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-weight: bold;

        >div::before {
            content: ' * ';
            color: #f50;
        }
    }
}
</style>